<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import NoData from '@/components/no-data.vue'
import { getUrlObj } from '@/utils/index'

const mitt = defineEmits(['change']) // 定义组件的事件

const toast = useToast() // 使用 toast 提示
const show = ref(false) // 弹窗显示状态

const originList = [
  {
    device: '676781281',
    num: 2,
  },
  {
    device: '676781282',
    num: 1,
  },
  {
    device: '676781283',
    num: 2,
  },
  {
    device: '676781284',
    num: 1,
  },
  {
    device: '17906791',
    num: 1,
  },
]
interface deviceInterface {
  device: string
  num: number
}
const deviceList = ref<deviceInterface[]>(originList) // 设备列表，初始为原始列表
const device = ref<deviceInterface | null>(null)
const searchVal = ref('') // 搜索值
function search() {
  // 搜索功能
  if (!searchVal.value) {
    deviceList.value = originList // 如果搜索值为空，返回原始列表
    return
  }
  if (searchVal.value) {
    deviceList.value = originList.filter(item => item.device.includes(searchVal.value))
  }
}
function clear() {
  // 清除搜索
  searchVal.value = ''
  deviceList.value = originList
}
function confirm() {
  // 确认选择设备
  if (device.value)
    mitt('change', device.value) // 触发 change 事件，传递选中的设备编号
  searchVal.value = ''
  deviceList.value = originList
  device.value = null
  show.value = false // 关闭弹窗
}
function close() {
  // 关闭弹窗
  show.value = false
  searchVal.value = ''
  deviceList.value = originList
  device.value = null
}
function scan() {
  // 扫描二维码获取设备编号
  uni.scanCode({
    success: (res) => {
      console.log(res)
      const result = res.result
      try {
        const UrlObj = getUrlObj(result)
        const sid = UrlObj.query.sid
        if (sid) {
          searchVal.value = sid
        }
        else {
          searchVal.value = ''
          toast.warning('未识别到设备编号')
        }
      }
      catch (error) {
        searchVal.value = ''
        toast.warning('未识别到设备编号')
        console.log('未识别到设备编号')
      }
      search()
    },
  })
}
</script>

<template>
  <wd-toast />
  <wd-button custom-class="options-btn" size="small" @click="show = true">
    切换设备
  </wd-button>
  <wd-popup v-model="show" position="bottom" :safe-area-inset-bottom="true" :close-on-click-modal="false" custom-style="height:400px;border-radius:32rpx;" @close="close">
    <view class="content">
      <view class="options">
        <wd-icon name="close" size="18px" @click="close" />
        <view class="color-[#4d80f0]" @click="confirm">
          完成
        </view>
      </view>
      <view class="px-2 py-30rpx">
        <view class="search-box">
          <wd-icon name="scan" size="33px" color="#1296db" @click="scan" />
          <view class="flex-1">
            <wd-search v-model="searchVal" :maxlength="12" cancel-txt="搜索" @search="search" @cancel="search" @clear="clear" />
          </view>
        </view>
        <view class="list">
          <view v-for="item in deviceList" :key="item.device" class="l-item" @click="device = device === item ? null : item">
            <view class="l-item-content">
              <view class="device-no">
                <!-- <wd-icon name="phone" size="17px" /> -->
                {{ item.device }}
              </view>
              <view class="send-num">
                {{ item.num }}币/次
              </view>
            </view>
            <!-- <wd-icon name="check-circle-filled" size="17px" color="#ffc107" /> -->
            <view v-if="item.device === device?.device" class="selected">
              <wd-img src="/static/images/select.png" width="28px" height="28px" />
            </view>
          </view>
        </view>
      </view>
      <NoData v-if="!deviceList.length" />
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
  // :deep(){
  //   .options-btn {
  //     height: 30rpx;
  //     font-size: 28rpx !important;
  //     background-color: #a2d445 !important;
  //   }
  // }
    .content {
        padding: 30rpx 20rpx;
    }
    .options {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .search-box {
        display: flex;
        align-items: center;
    }
    .list {
        padding: 20rpx 0;
        display: flex;
        flex-wrap: wrap;
        .l-item {
            position: relative;
            margin: 20rpx 10rpx;
            padding: 13rpx 16rpx 20rpx;
            color: #419cfe;
            font-size: 28rpx;
            text-align: center;
            background-image:  url($img-url+'/images/kj-bg.png');
            background-size: 100% 100%;
            .selected {
                position: absolute;
                top: 0;
                right: 0;
            }
            .l-item-content{
              background-color: #d7effb;
              border-radius: 8rpx;
              width: 178rpx;
            }
            .device-no {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            // .send-num {
            //     font-size: 24rpx;
            //     margin: 5rpx 30rpx;
            //     background-color: #419cfe;
            //     color: #ffffff;
            // }
        }
    }
</style>
